render()
// 我的音乐模块的移动tab切换
document.querySelector('.header_top_nav').addEventListener('mouseover', function (e) {
    const filter = e.target.classList[1]
    if (e.target.tagName === 'A' && filter != 'bgGreen') {
        const green = document.querySelector('.header_top_nav .green')
        if (green) {
            green.classList.remove('green')
        }
        e.target.classList.add('green')
    }
})
// 移除消失
document.querySelector('.header_top_nav').addEventListener('mouseout', function (e) {
    if (e.target.tagName === 'A') {
        e.target.classList.remove('green')
    }
})

// 点击切换
document.querySelector('.header_top_nav').addEventListener('click', function (e) {
    // console.log(e.target.classList[0]);
    const filter = e.target.classList[1]
    if (e.target.tagName === 'A') {
        const green = document.querySelector('.header_top_nav .bgGreen')
        if (green) {
            green.classList.remove('bgGreen')
        }
        e.target.classList.add('bgGreen')
        e.target.classList.remove('green')
    }
})
// 首页导航栏切换
document.querySelector('.header_top_subnav').addEventListener('click', function (e) {
    if (e.target.tagName === 'A') {
        const green = document.querySelector('.header_top_subnav .green')
        if (green) {
            green.classListNaNpxove('green')
        }
        e.target.classList.add('green')
    }
})
//  搜索下拉框 显示 
// 获取事件
// 获取搜索框
const search = document.querySelector('.icon_search')
const select = document.querySelector('.search_input_other')
//   获取大的dl
const dd = document.querySelector('.dd_item')
//   获取删除按钮
const shanchu = document.querySelector('#shanchu')
// 点击搜索框历史记录下拉框显示，点击空白部分隐藏
document.addEventListener('click', function (item) {
    const search = document.querySelector('.header_top_search')

    let tDom = item.target
    if (search === tDom || search.contains(tDom)) {
        select.style.display = 'block'
    } else {
        select.style.display = 'none'
    }
})

//   点击事件
search.addEventListener('click', function (e) {
    select.style.display === 'none'
    e.stopPropagation()
    const value = document.querySelector('.search_input_input').value
    if (value.trim() !== '') {
        const div = document.createElement('div')
        div.innerHTML = value
        dd.appendChild(div)
        document.querySelector('.search_input_input').value = ''
    }

})
// 点击删除按钮后清空内容
shanchu.addEventListener('click', function () {
    // document.querySelector('.search_input_other').style.display='block'
    dd.innerHTML = ''
})
// 开通vip和充值模块
document.querySelector('.select__choose_vip').addEventListener('mouseover', function (e) {
    document.querySelector('.ffb').style.display = 'block'
})
document.querySelector('.ffb').addEventListener('mouseover', function (e) {
    document.querySelector('.ffb').style.display = 'block'

    if (e.target.tagName === 'A') {
        const green = document.querySelector('.ffb .bgGreen')
        if (green) {
            green.classList.remove('bgGreen')
        }
        e.target.classList.add('bgGreen')
    }
})
document.querySelector('.ffb').addEventListener('mouseout', function (e) {
    if (e.target.tagName === 'A') {
        const green = document.querySelector('.ffb .bgGreen')
        if (green) {
            green.classList.remove('bgGreen')
        }
    }
    document.querySelector('.ffb').style.display = 'none'
})
document.querySelector('.select__choose_vip').addEventListener('mouseout', function (e) {
    document.querySelector('.ffb').style.display = 'none'

})
// 充值模块
document.querySelector('.chongzhi').addEventListener('mouseover', function () {
    document.querySelector('.sell').style.display = 'block'
    document.querySelector('.chongzhi').classList.add('bgGreen')
})
document.querySelector('.chongzhi').addEventListener('mouseout', function () {
    document.querySelector('.sell').style.display = 'none'
    document.querySelector('.chongzhi').classList.remove('bgGreen')
})
document.querySelector('.sell').addEventListener('mouseover', function () {
    document.querySelector('.sell').style.display = 'block'
})
document.querySelector('.sell').addEventListener('mouseout', function () {
    document.querySelector('.sell').style.display = 'none'
})
document.querySelector('.mod_select_cz').addEventListener('mouseover', function (e) {
    if (e.target.tagName === 'A') {
        const green = document.querySelector('.mod_select_cz .bgGreen')
        if (green) {
            green.classList.remove('bgGreen')
        }
        e.target.classList.add('bgGreen')

    }
})
document.querySelector('.mod_select_cz').addEventListener('mouseout', function (e) {
    const green = document.querySelector('.mod_select_cz .bgGreen')
    if (green) {
        green.classList.remove('bgGreen')
    }
})
// const g = document.querySelector('.userImg')
// const pic = localStorage.getItem('picname')
// g.addEventListener('click', function () {
//     g.style.backgroundImage=`url(./images/${pic})`
//     console.log(`url(../images/${pic})`);
//     // g.style.backgroundColor='red'
//     console.log(11);
// })
function render() {
    const pic = localStorage.getItem('picname')
    const success = localStorage.getItem('success')
    const login = document.querySelector('.login_btn')
    if (success) {
        login.innerHTML = ` <a href="#" class="userImg">
        <img src="./images/smqq.png" class="smqq" alt="">
    </a>`
    document.querySelector('.userImg').style.backgroundImage=`url(./images/${pic})`
    document.querySelector('.userDetail_img').style.backgroundImage=`url(./images/${pic})`
    usermore()
    console.log(pic);
    } else {
        login.innerHTML = ` <a href="#" class="top_login__link">登录</a>`
    }
}
function usermore() {
    let time;
    // 鼠标移入头像显示个人详情
    document.querySelector('.userImg').addEventListener('mouseenter', function () {
        document.querySelector('.userMore').style.display = 'block'
    })
    document.querySelector('.userImg').addEventListener('mouseleave', function () {
        time = setTimeout(() => {
            document.querySelector('.userMore').style.display = 'none'
        }, 300)
    })
    // 鼠标移入个人详情就让个人详情不消失
    document.querySelector('.userMore').addEventListener('mouseenter', function () {
        clearTimeout(time)
        document.querySelector('.userMore').style.display = 'block'
    })
    document.querySelector('.userMore').addEventListener('mouseleave', function () {
        time = setTimeout(() => {
            document.querySelector('.userMore').style.display = 'none'
        }, 300)
    })
    // 点击退出后
    document.querySelector('.breakLogin').addEventListener('click', function () {
        document.querySelector('.userMore').style.display = 'none'
        localStorage.removeItem('success')
        render()
        console.log(111);
    })
}


